<template>
  <div class="component-upload-image">
    <el-upload
      class="upload-demo"
      :action="uploadFileUrl()"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :on-change="changeUpload"
      :limit="1"
      :file-list="fileList">
<!--      <div style="width:340px;font-size:12px;margin-bottom:15px;">新头像不允许涉及政治敏感与色情;<br />图片格式必须为：png,bmp,jpeg,jpg,gif；不可大于2M；<br />建议使用png格式图片；建议图片尺寸为144px*144px</div>-->
      <el-button size="small">上传图片</el-button>
      <div slot="tip" class="el-upload__tip"></div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getUploadToken } from "@/api/monitor/file";
import {getPlatFromId } from "@/api/applet/authorization";
export default {
  data() {
    return {
      platformids:'',
      fileList: [],
      dialogVisible: false,
      upload_domain: "",
      uploadData: { token: "", key: "" },
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    imageStr: {
      type: Object,
    },
    imageurl: {
      type: String,
      default: "",
    },
  },
  methods: {
    uploadFileUrl:function(){
      getPlatFromId().then(response => {
        this.platformids = response;
      })
      return process.env.VUE_APP_BASE_API+"/wechat/applet/saveTemporaryMaterial?platformid="+this.platformids+"&authorizationType=applet";
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      this.$message.success("上传成功");
      this.$emit("update:imageStr", res.media_id);
    },
    handleRemove(file, fileList) {
      this.$emit("update:imageStr", null);
      this.$emit("update:imageurl", null);
    },
    handleBeforeUpload(file){
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          this.uploadFileUrl = process.env.VUE_APP_BASE_API+'/wechat/applet/saveTemporaryMaterial?platformid='+this.platformids+"&authorizationType=applet";
          resolve()
        })
      })
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    changeUpload(file,fileList){
      this.localFile=file.raw  // 或者 this.localFile=file.raw
      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader()
      reader.readAsDataURL(this.localFile);// 这里也可以直接写参数event.raw
      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.log(reader.result)看一下
      reader.onload=()=>{
        this.$emit("update:imageurl", reader.result);
      }
      // /* 另外一种本地预览方法 */
      // let URL = window.URL || window.webkitURL;
      // this.model.icon = URL.createObjectURL(file.raw);
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
    }
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.image {
  position: relative;
  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }
  &:hover .mask {
    opacity: 1;
  }
}
.el-upload-list__item {
  transition: none !important;
}
.el-icon-mask{
  font-size: 20px;
  margin-right: 5px;
}
.el-icon-plus {
  font-size: 20px;
}
</style>
